<template>
    <div class="song-cell-item">
        <div class="cell-left" v-if="cover">
            <template v-if="!order">
               <img class="cover" :src="cover + '?imageView&thumbnail=100y100&quality=50&tostatic=0'" alt="cover" />
            </template>
            <template v-else> 
                <span>{{index+1}}</span>
            </template>
        </div>
        <div class="cell-center">
            <p class="cell-center-caption">{{item.name}}</p>
            <span class="cell-center-sub-text">{{authors}}</span>
        </div>
        <div class="cell-right">
            <v-icon @click="playClick" v-click-outside="active = false" :dark="active">
                mdi-play-circle-outline
            </v-icon>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        data: {
            type: Object,
            require: true
        },
        order: {
            type: Boolean,
            default: false
        },
        index: {
            type: Number
        },
        detail: {
            type: Boolean,
            defautl: false
        }
    },
    computed: {
        item(){
            return this.data;
        },

        authors(){

            let author = '';

            if(this.detail){
                author = this.data.ar.map(item => item.name).join('、');
            }else{
                if(this.data.album.artists && Array.isArray(this.data.album.artists)){
                    author = this.data.album.artists.map(item => item.name).join()
                }

                if(this.data.artists && Array.isArray(this.data.artists)){
                    author = this.data.artists.map(item => item.name).join()
                }
            }

            

            return author;
        },

        cover() {
            let cover = '';
            if(this.detail){
              
                cover = this.data.al.picUrl;
            }else{
            
                cover = this.data.album.blurPicUrl
            }

            return cover;
        }
    },
    data(){
        return {
            active: false
        }
    },
    methods: {
        playClick(){
            this.active = true;
            this.$emit('play-click',this.data)
        }
    } 
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global';
    .song-cell-item {
        display: flex;
        margin-bottom: px2rem(12);
        border: 1px solid #eee;
        border-radius: px2rem(4);
        box-shadow: 0 px2rem(2) px2rem(2) #cecece;
        .cell-left {
            width: px2rem(60);
            height: px2rem(60);
            flex-shrink: 0;
            text-align: center;
            line-height: px2rem(60);    
            .cover {
                width: 100%;
                height: 100%;
            }
        }

        .cell-center {
            flex: 1;
            width: 0;
            text-align: left;
            padding: 0 px2rem(12);
            .cell-center-caption {
                @include defaultTitle;
                @include ellipsis;
                margin-top: px2rem(6);
            }

            .cell-center-sub-text {
                display: inline-block;
                @include defaultFontSize;
                @include ellipsis;
                color: #333;
                margin-top: px2rem(10);
            }
        }

        .cell-right {
            width: px2rem(60);
            height: px2rem(60);
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;

            .icon-play {
                width: px2rem(28);
                height: px2rem(28);
                border: 1px solid #ccc;
                border-radius: 50%;
                position: relative;
                &::after {
                    content: '';
                    position: absolute;
                    left: 44%;
                    top: 24%;
                    width: 0;
                    height: 0;
                    border: px2rem(8) solid transparent;
                    border-left-color: rgb(209, 68, 68);
                }
            }


        }
    }
</style>